<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tob Deng-home page</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="shortcut icon" href="./imager/code library.png" type="icon"></link>
    <style>
        body{
            background-color: #f4f2f1da;
        }
        .host {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
            margin-top: 7%;
        }
        .los {
            margin-top: 15px;
            width: 200px;
            height: 200px;
            border-radius: 100%;
        }
        /* 当屏幕宽度小于或等于600px时 */
@media screen and (max-width: 600px) {
  .host {
    margin-top: 35%;
  }
}

/* 当屏幕宽度在640px到900px之间时 */
@media screen and (min-width: 601px) and (max-width: 800px) {
  .host {
    margin-top: 30%;
  }
}

/* 当屏幕宽度在601px到900px之间时 */
@media screen and (min-width: 801px) and (max-width: 900px) {
  .host {
    margin-top: 15%;
  }
}
        .host_name {
            font-weight: bold;
            background: linear-gradient(to right, rgb(242, 44, 44), rgb(255, 111, 1));
            -webkit-background-clip: text;
            color: transparent;
            font-size: 50px;
            text-align: center;
        }
        .box {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: center;
            gap: 25px;
            margin-top: 30px;
        }
        p {
            font-weight: 600;
            margin-top: 10px;
            color: rgba(39, 38, 38, 0.65);
            font-size: 20px;
        }
        .to_1,
        .to_2,
        .to_3 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            border: none;
            width: 150px;
            height: 50px;
            border-radius: 50px;
            transition: 0.8s;
        }
        .to_1 {
            background-color: #263ea7;
        }
        .to_1:hover {
            background-color: #273bc1;
            box-shadow: 0 0 10px #273bc1;
        }
        .to_2 {
            background-color: #000002;
        }
        .to_2:hover {
            background-color: #343434;
            box-shadow: 0 0 10px #3b3b3b;
        }
        .to_3 {
            background-color: #eac018;
        }
        .to_3:hover {
            background-color: #f19c08;
            box-shadow: 0 0 10px #f19c08;
        }
        .apps {
            width: 2em;
            height: 2em;
            margin-left: -20px;
            margin-top: 6px;
            margin-right: 10px;
        }
        .code{
            width: 1.6em;
            height: 1.6em;
            margin-left: -20px;
            margin-top: 3px;
            margin-right: 10px;
        }
        .Tipping{
            width: 1.6em;
            height: 1.6em;
            margin-left: -20px;
            margin-top: 3px;
            margin-right: 10px;
        }
        a{
            text-decoration: none;
        }



        .header{
            height: 80px;
            background-color: white;
        }
        .hb{
            padding-bottom: 6px;
            color: #565e6c;
            font-size: 20px;
            font-weight: 700
        }
        .hb:hover,
        .home1{
            color: #373a40;
            border-bottom: #ff5500da 2.5px solid;
        }
        ul{
            width: 75%;
            line-height: 80px;
            display: flex;
            justify-content: flex-end;
            gap: 40px;
        }
        .icon1,
        .icon1:hover,
        .icon2,
        .icon2:hover{
            border-bottom: #ff5500da 0px solid;
        }



        /* Music */
        
    .container {
        text-align: center;
        max-width: 300px;
        background-color: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .music-player {
        /* 固定在左下角移动也是 */
        position: fixed;
        bottom: 10px;
    }
    .toggle-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
    }

    .toggle-button img {
        width: 20px;
        height: 20px;
        margin-right: -2px;
    }

    .song-info img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .song-info h2 {
        font-size: 18px;
        color: rgb(23, 23, 23);
        margin-bottom: 10px;
    }

    .song-info p {
        font-size: 14px;
        color: rgb(57, 55, 53);
        margin-bottom: 15px;
    }

    .custom-player {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .custom-player button {
        background-color: transparent;
        border: none;
        width: 50px; /* 调整按钮大小 */
        height: 50px; /* 调整按钮大小 */
        cursor: pointer;
        transition: transform 0.3s ease;
        padding: 0;
    }

    .custom-player button:hover {
        transform: scale(1.1);
    }

    .custom-player button:focus {
        outline: none;
    }

    .custom-player img {
        width: 100%; /* 图标适应按钮大小 */
        height: 100%; /* 图标适应按钮大小 */
    }

    .progress-bar {
        flex-grow: 1;
        height: 5px;
        background-color: #ddd;
        border-radius: 5px;
        margin: 0 10px;
        position: relative;
    }

    .progress-bar-fill {
        height: 100%;
        background-color: rgb(242, 44, 44);
        width: 0;
        border-radius: 5px;
    }

    .play-button {
        margin-top: 15px;
        padding: 10px 20px;
        background-color: rgb(242, 44, 44);
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

    .play-button:hover {
        background-color: rgb(255, 111, 1);
    }

    audio {
        display: none; /* 隐藏默认播放器 */
    }

    .collapsed .song-info,
    .collapsed .play-button {
        display: none;
    }

    .collapsed {
        padding: 10px 20px;
    }
    </style>
</head>
<body>
    <div class="header">
        <ul>
            <li><a class="hb home1" href="./index.html">Home</a></li>
            <li><a class="hb" href="./apps.html" >Apps</a></li></li>
            <li><a class="hb" href="./code.html">Code</a></li></li>
            <li><a class="hb" href="./about.html">About</a></li></li>
            <li><a class="icon1 hb" href="#rss"><svg style="width: 1.5em;height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3499"><path d="M763.904 921.6l157.696 0c0-444.416-367.616-806.4-819.2-806.4l0 154.624c364.544 0 661.504 292.352 661.504 651.776zM485.376 921.6l157.696 0c0-293.376-242.688-532.48-540.672-532.48l0 154.624c102.4 0 198.144 39.424 270.848 110.592 72.192 71.168 112.128 166.4 112.128 267.264zM211.456 920.576c59.904 0 109.056-47.616 109.056-107.008 0-58.88-49.152-107.008-109.056-107.008-60.416 0-109.056 48.128-109.056 107.008 0 59.392 48.64 107.008 109.056 107.008z" p-id="3500"></path></svg></a></li>
            <li><a class="icon2 hb" href="#email"><svg class="icon" style="width: 1.8em;height: 1.8em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4722"><path d="M887.044 267.194H135.36c-39.56 0-71.631 32.07-71.631 71.632v463.536c0 39.561 32.07 71.632 71.631 71.632h751.685c39.561 0 71.632-32.07 71.632-71.632V338.826c0-39.562-32.07-71.632-71.632-71.632z m12.733 100.255v406.715c0 0.039-0.003 0.077-0.003 0.116L683.68 580.338l216.097-212.89zM383.103 620.616c70.996 50.776 191.38 54.63 258.105 0.748L857.07 815.095H166.406l216.697-194.48z m471.412-294.523l-218.34 215.055c-77.786 80.175-179.434 75.4-252.906-1.627L171.962 326.093h682.553z m-731.889 40.932c0-2.023 0.153-4.01 0.436-5.953l216.892 219.127-217.3 195.023c-0.01-0.353-0.027-0.704-0.027-1.058V367.025z" p-id="4723"></path></svg></a></li>
        </ul>
    </div>
    <div class="host">
        <img class="los" src="./imager/avatar.png" alt="tx">
        <br>
        <span class="host_name">Tob Deng</span>
        <br>
        <p>Currently a student & front-end code developer</p>
        <div class="box">
            <a href="./apps.html"><button class="to_1"><img class="apps" src="./imager/ios-appstore.png" alt="apps">Apps</button></a>
            <a href="#Tipping"><button class="to_3"><img class="Tipping" src="./imager/Tipping.png" alt="Tipping">Tipping</button></a>
            <a href="#code"><button class="to_2"><img class="code" src="./imager/github.png" alt="code">Code</button></a>
        </div>
    </div>


<div class="music-player">
    <div class="container" id="player-container">
        <button class="toggle-button" onclick="togglePlayer()">
            <img src="./imager/fullscreen-exit.png" alt="Toggle">
        </button>
        <div class="song-info" id="song-info">
            <p>Tap the button to get random songs</p>
        </div>
        <button class="play-button" onclick="fetchRandomSong()">Get random music</button>
        <div class="custom-player" id="custom-player">
        </div>
    </div>
</div>
    
    <script>
        let audio;
        let isPlaying = false;
    
        // 恢复音乐播放状态
        window.onload = function () {
            const savedSong = localStorage.getItem('currentSong');
            const savedIsPlaying = localStorage.getItem('isPlaying');
            const savedCurrentTime = localStorage.getItem('currentTime');
    
            if (savedSong) {
                audio = new Audio(savedSong);
                audio.currentTime = savedCurrentTime ? parseFloat(savedCurrentTime) : 0;
    
                const songInfoDiv = document.getElementById('song-info');
                songInfoDiv.innerHTML = `
                    <img src="${localStorage.getItem('songImg')}" alt="封面">
                    <h2>${localStorage.getItem('songName')}</h2>
                    <p>${localStorage.getItem('songArtist')}</p>
                `;
    
                const customPlayerDiv = document.getElementById('custom-player');
                customPlayerDiv.innerHTML = `
                    <button id="play-pause-btn">
                        <img src="./imager/play.png" alt="播放">
                    </button>
                    <div class="progress-bar">
                        <div class="progress-bar-fill" id="progress-bar-fill"></div>
                    </div>
                `;
    
                const playPauseBtn = document.getElementById('play-pause-btn');
                const progressBarFill = document.getElementById('progress-bar-fill');
    
                playPauseBtn.addEventListener('click', function () {
                    if (!isPlaying) {
                        audio.play();
                        playPauseBtn.innerHTML = '<img src="./imager/pause.png" alt="暂停">';
                        localStorage.setItem('isPlaying', 'true');
                    } else {
                        audio.pause();
                        playPauseBtn.innerHTML = '<img src="./imager/play.png" alt="播放">';
                        localStorage.setItem('isPlaying', 'false');
                    }
                    isPlaying = !isPlaying;
                });
    
                audio.addEventListener('timeupdate', function () {
                    const progress = (audio.currentTime / audio.duration) * 100;
                    progressBarFill.style.width = `${progress}%`;
    
                    // 更新当前播放时间到 localStorage
                    localStorage.setItem('currentTime', audio.currentTime);
                });
    
                if (savedIsPlaying === 'true') {
                    audio.play();
                    playPauseBtn.innerHTML = '<img src="./imager/pause.png" alt="暂停">';
                    isPlaying = true;
                }
            }
        };
    
        function togglePlayer() {
            const playerContainer = document.getElementById('player-container');
            playerContainer.classList.toggle('collapsed');
    
            const toggleButton = document.querySelector('.toggle-button img');
            if (playerContainer.classList.contains('collapsed')) {
                toggleButton.src = './imager/fullscreen-enter.png';
            } else {
                toggleButton.src = './imager/fullscreen-exit.png';
            }
        }
    
        async function fetchRandomSong() {
            // 如果有正在播放的歌曲，暂停并重置
            if (audio) {
                audio.pause();
                audio.currentTime = 0;
                isPlaying = false;
                document.getElementById('play-pause-btn').innerHTML = '<img src="./imager/play.png" alt="播放">';
            }
    
            const response = await fetch('https://api.cenguigui.cn/api/netease/');
            const data = await response.json();
    
            if (data.code === 200) {
                const songInfoDiv = document.getElementById('song-info');
                songInfoDiv.innerHTML = `
                    <img src="${data.data.img}" alt="封面">
                    <h2>${data.data.song_name}</h2>
                    <p>${data.data.artist}</p>
                `;
    
                audio = new Audio(data.data.play_url);
                const customPlayerDiv = document.getElementById('custom-player');
                customPlayerDiv.innerHTML = `
                    <button id="play-pause-btn">
                        <img src="./imager/play.png" alt="播放">
                    </button>
                    <div class="progress-bar">
                        <div class="progress-bar-fill" id="progress-bar-fill"></div>
                    </div>
                `;
    
                const playPauseBtn = document.getElementById('play-pause-btn');
                const progressBarFill = document.getElementById('progress-bar-fill');
    
                playPauseBtn.addEventListener('click', function () {
                    if (!isPlaying) {
                        audio.play();
                        playPauseBtn.innerHTML = '<img src="./imager/pause.png" alt="暂停">';
                        savePlaybackState(data.data.play_url, data.data.img, data.data.song_name, data.data.artist);
                    } else {
                        audio.pause();
                        playPauseBtn.innerHTML = '<img src="./imager/play.png" alt="播放">';
                        localStorage.setItem('isPlaying', 'false');
                    }
                    isPlaying = !isPlaying;
                });
    
                audio.addEventListener('timeupdate', function () {
                    const progress = (audio.currentTime / audio.duration) * 100;
                    progressBarFill.style.width = `${progress}%`;
    
                    // 更新当前播放时间到 localStorage
                    localStorage.setItem('currentTime', audio.currentTime);
                });
    
                // 播放新歌时保存所有信息
                savePlaybackState(data.data.play_url, data.data.img, data.data.song_name, data.data.artist);
            } else {
                alert('获取歌曲失败，请稍后重试。');
            }
        }
    
        function savePlaybackState(url, img, name, artist) {
            localStorage.setItem('currentSong', url);
            localStorage.setItem        ('songImg', img);
        localStorage.setItem('songName', name);
        localStorage.setItem('songArtist', artist);
        localStorage.setItem('isPlaying', 'true');
        localStorage.setItem('currentTime', audio.currentTime);
    }
    </script>
</body>
</html>